<template>
  <div>
    <h1>当前订单</h1>
    <form action="/submit" method="POST">
      <ul>
        <li>
          <label>订单编号：{{ order.orderId }}</label>
        </li>
        <li>
          <label>用户ID ：{{ order.userId }}</label>
        </li>
        <li>
          <label for="orderDate">下单时间：</label>
          <input type="datetime-local" id="orderDate" v-model="order.orderData" readonly />
        </li>
        <li>
          <label for="shipAddr">送达地址：</label>
          <input type="text" id="shipAddr" v-model="order.shipAddr1" />
        </li>
        <li>
          <label for="shipState">送达州/省份：</label>
          <input type="text" id="shipState" v-model="order.shipState" />
        </li>
        <li>
          <label for="shipCountry">送达国家：</label>
          <input type="text" id="shipCountry" v-model="order.shipCountry" />
        </li>
        <li>
          <label>订单总金额：{{ order.totalPrice }}</label>
        </li>
        <li>
          <label for="billToFirstName">收货人名：</label>
          <input class="firstname" type="text" id="billToFirstName" v-model="order.billToFirstName" />
          <label for="billToLastName">收货人姓：</label>
          <input class="lastname" type="text" id="billToLastName" v-model="order.billToLastName" />
        </li>
        <li>
          <label for="creditCard">信用卡号码：</label>
          <input type="text" id="creditCard" v-model="order.creditCard" />
        </li>
        <li>
          <label for="exprDate">送达时间：</label>
          <input type="datetime-local" id="exprDate" v-model="order.exprDate" readonly />
        </li>
      </ul>
      <div class="form-group">
        <button type="submit" @click="fetchData">提交</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import service from "@/api/request0.js";
import { useCartStore } from "@/stores/cartStore";
import { useUserStore } from "@/stores/userStore";
import { ref } from 'vue'

const cartStore = useCartStore();
const userStore = useUserStore();

// 随机数生成订单编号
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
const order = ref({
  orderId:getRandomInt(1000000, 9999999),
  userId:userStore.userId,
  orderData:'',
  shipAddr1:'',
  shipState:'',
  shipCountry:'',
  totalPrice:cartStore.totalPrice,
  billToFirstName:'',
  billToLastName:'',
  creditCard:'',
  exprDate:'',
})
console.log(order);



const fetchData = async () => {
  try {
    const response = await service.post('https://localhost:8080/orders/update')
    order.value = response
  } catch (error) {
    console.error('Error fetching 订单 data:', error)
  }
}

</script>

<style scoped>
div {
  margin-top: 60px;
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 120px;
  font-weight: bold;
}

input {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.firstname {
  width: 100px;
}

.form-group {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.lastname {
  width: 100px;
}
</style>
